<template>
  <div class="vipAudit">
    <!-- <van-nav-bar title left-arrow @click-left="backHome" /> -->
    <nav-bar></nav-bar>
    <div class="content">
      <div class="title-box">
        <div class="icon-box">
          <img src="@/assets/img/tongguo.png" alt />
        </div>
        <div class="vipStatus">{{vipStatus}}</div>
      </div>
      <div class="text-box">
        <div class="textTitle">
          <span v-show="vip.status == 3">支付已成功</span>
          <span v-show="vip.status == 4">你已认证成功，会员信息如下</span>
        </div>
        <div class="textContent">
          <span v-show="vip.status == 3">
            请使用电脑端登陆中装协官网（如忘记密码可通过手机号找回）下载申请表并邮寄至指定地址。
            <br />官网链接地址：www.cbda1984.com
          </span>
          <div class="info-content" v-show="authenticationResult.flag === 1">
            <div class="info-item">姓 名：{{authenticationResult.name}}</div>
            <div class="info-item">认证类别：个人会员</div>
            <div class="info-item">会员编号：{{authenticationResult.vipNumber}}</div>
            <div class="info-item">专业类别：{{authenticationResult.companyName}}</div>
            <div class="info-item">入会时间：{{authenticationResult.createTime}}</div>
            <div class="info-item">到期时间：{{authenticationResult.endTime}}</div>
          </div>
          <div class="info-content" v-show="authenticationResult.flag === 0">
            <div class="info-item">名 称：{{authenticationResult.companyName}}</div>
            <div class="info-item">认证类别：企业会员</div>
            <div class="info-item">会员编号：{{authenticationResult.vipNumber}}</div>
            <div class="info-item">入会时间：{{authenticationResult.createTime}}</div>
            <div class="info-item">到期时间：{{authenticationResult.endTime}}</div>
            <div class="info-item"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="botton-box">
      <span v-show="vip.status == 3 || vip.status == 4" @click="backHome()">确定</span>
    </div>
    <!-- <div class="applyButton" @click="applyVip()">同意并申请入会</div> -->
    <div class="fuli-box-cm">
      <fuli></fuli>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import navBar from '@/components/NavBar'
import fuli from '@/components/fuli'
export default {
  components: {
    navBar,
    fuli,
  },
  name: 'vipAuthentication',
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      imgUrl: config.imgUrl,
      param: {
        page: 1,
        pageSize: 10,
      },
      vip: {},
      vipStatus: '',
      authenticationResult: {},
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    update() {
      this.$router.push({
        path: '/updateApplyVip',
        query: {
          declareId: this.vip.declareId,
          pageUrl: this.vip.pageUrl,
        },
      })
    },
    findAuthentiaction() {
      this.$request.post('/vip/selectVIPMessage').then((rsp) => {
        console.log(rsp, '进不来吗')
        if (rsp.code === 200) {
          this.authenticationResult = rsp.data
        } else {
          this.$message.error(rsp.content)
        }
      })
    },
    findVip() {
      this.param.userCode = this.userInfo.userCode
      this.$request.post('/vip/selectMyVip', this.param).then((rsp) => {
        if (rsp.code === 200) {
          this.vip = rsp.data.list[0]
          this.vipStatus = this.statusForatter(this.vip.status)
          if (this.vip.status === '4') {
            this.findAuthentiaction()
          }
        } else {
          this.$message.error(rsp.data.content)
        }
      })
    },
    statusForatter(cellValue) {
      let status = ''
      if (cellValue == '0') {
        status = '待审核'
      } else if (cellValue == '1') {
        status = '已通过'
      } else if (cellValue == '2') {
        status = '未通过'
      } else if (cellValue == '3') {
        status = '支付成功'
      } else if (cellValue == '4') {
        status = '认证成功'
      }
      return status
    },
  },
  mounted() {
    this.findVip()
  },
}
</script>
<style lang='scss'>
@import '../assets/css/base';
.fuli-box-cm {
  padding: 0 px2rem(30);
  box-sizing: border-box;
  margin-top: 60px;
}
.vipAudit {
  .content {
    background-size: 100% 100%;
    height: px2rem(500);
    position: relative;
    .title-box {
      position: absolute;
      left: 0;
      right: 0;
      top: px2rem(70);
      .vipStatus {
        color: #333;
        font-size: px2rem(56);
        text-align: center;
        font-weight: 600;
        margin-top: px2rem(20);
        letter-spacing: px2rem(2);
      }
      .icon-box {
        text-align: center;
        img {
          width: px2rem(130);
          height: px2rem(130);
        }
      }
    }
    .text-box {
      background-size: 100% 100%;
      height: px2rem(600);
      position: absolute;
      left: 0;
      right: 0;
      top: px2rem(280);
      margin: 0 px2rem(20);
      .textTitle {
        text-align: center;
        font-size: px2rem(36);
        margin-top: px2rem(70);
      }
      .textContent {
        text-align: left;
        color: #a0a0a0;
        margin-top: px2rem(60);
        font-size: px2rem(32);
        padding: 0 px2rem(80);
        line-height: px2rem(60);
      }
    }
  }
  .botton-box {
    margin-top: px2rem(460);
    text-align: center;
    & > span {
      font-size: px2rem(36);
      background-color: $mainColor;
      padding: px2rem(20) px2rem(180);
      border-radius: px2rem(10);
      color: #fff;
    }
  }
  .applyButton {
    color: #fff;
    background: $mainColor;
    position: fixed;
    bottom: 0;
    height: px2rem(100);
    text-align: center;
    width: 100%;
    line-height: px2rem(100);
    font-size: px2rem(36);
  }
}
</style>
